<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/include/commonTaglib.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>用户页面</title>
</head>
<body>
   <table id="userListGrid" class="easyui-datagrid" title="用户列表"></table>
   <div id="toolbar" style="padding:5px;height:auto">
	<div style="margin-bottom:5px">
		<a href="javascript:add()" class="easyui-linkbutton" iconCls="icon-add" plain="true">新增</a>
		<a href="javascript:edit()" class="easyui-linkbutton" iconCls="icon-edit" plain="true">修改</a>
		<a href="javascript:cancel()" class="easyui-linkbutton" iconCls="icon-cancel" plain="true">删除</a>
	</div>
	<div>
		用户名:<input id="userName"class="easyui-textbox" style="width:80px">
		<a href="javascript:search()" class="easyui-linkbutton" iconCls="icon-search">Search</a>
	</div>
	<div id="popup" title="新增" class="easyui-dialog"  style="width:400px;height:200px;padding:10px">
	     <table>
	     <tr>
	           <td><lable for="role">分配角色:</lable></td>
	           <td><input  id="role" name="role"/></td>
	         </tr>
	         <tr>
	           <td><lable for="dept">所属部门:</lable></td>
	           <td><input  id="dept" name="dept"/></td>
	         </tr>
	         <tr>
	           <td><lable for="name">用户名:</lable></td>
	           <td><input  id="name"class="easyui-textbox" style="width:200px"></td>
	         </tr>
	     </table>
	     <input  id="id" type="text"style="width:200px;display:none">
	     <input  id="type" type="text"style="width:200px;display:none">
	</div>
</div>
</body>
<script type="text/javascript">
$(function(){
	var datagrid = $("#userListGrid").datagrid({  
	      url:"${ctx}/userManage/getUsers",
	      width:'99%',
	      height:'99%',
	      pagination:true,//显示分页  
	      rownumbers:true,//显示行号
	      pageSize:20,//分页大小  
	      pageList:[20,40,60,80],//每页的个数  
	      //fit:true,//自动补全  
	      fitColumns:true, 
	      			loadFilter : function(data){
	      				 //过滤数据
	      				if(data.items==null || data.items==""){
	       					return {total:0,rows:[]}; 
	       				}else{
	      				 var value={
	      				 total:data.total,
	      				 rows:[]
	      				 };
	      				 var x=0;
	      				 for (var i = 0; i < data.items.length; i++) {  
	      					 value.rows[x]=data.items[i];
	      					 x++;
	      				 }
	      				 return value;
	       				}
	      			},
	      toolbar:"#toolbar", 
	      columns:[[      //每个列具体内容  
	               {field:'ck',checkbox:true },
	               {field:'id', title:'用户ID',width:100,hidden:true},
	               {field:'roles', title:'角色',width:100,
	            	   formatter: function(value,row,index){
	       				if (value){
	       					var returnValue="";
	       					for(var i=0;i<value.length;i++){
	       						if(i==(value.length-1)){
	       							returnValue+=value[i].name
	       						}else{
	       							returnValue+=value[i].name+","
	       						}
	       					}
	       					return returnValue;
	       				}
	       			}  
	               },
	               {field:'name', title:'用户名',width:100}
	            ]],
	             singleSelect: false,
	 	         selectOnCheck: true,
	 	         checkOnSelect: true,
	  });
	//设置分页
	 var p = $('#userListGrid').datagrid('getPager');  
	  $(p).pagination({  
	      beforePageText: '第',//页数文本框前显示的汉字  
	      afterPageText: '页    共 {pages} 页',  
	      displayMsg: '当前显示 {from} - {to} 条记录   共 {total} 条记录',  
	   });
	  //初始化部门选择框
	  $('#dept').combobox({
		    url:'${ctx}/deptManage/getDepts',
		    width:"200px",
		    valueField:'id',
		    textField:'name',
		    editable:true,
		    panelHeight:'auto',
		    onShowPanel:function(){
					var data=$(this).combobox('getData');
					if(data.length>5){
						$(this).combobox('panel').height('147px');
					}
				}
		});
	  
	  //初始化角色选择框
	  $('#role').combobox({
		    url:'${ctx}/permission/getRoles',
		    width:"200px",
		    valueField:'id',
		    textField:'name',
		    multiple:true,
		    editable:true,
		    panelHeight:'auto',
		    onShowPanel:function(){
					var data=$(this).combobox('getData');
					if(data.length>5){
						$(this).combobox('panel').height('147px');
					}
				}
		});
	  //初始化弹出框
	  $("#popup").dialog({
		  closed:true,
		  buttons: [{
				text:'提交',
				iconCls:'icon-ok',
				handler:function(){
				   sumbit();	
				}
			},{
				text:'取消',
				iconCls:'icon-cancel',
				handler:function(){
					$('#popup').dialog('close');
				}
			}]
	  })
})
//搜索
function search(){
	$('#userListGrid').datagrid('load', {
	    name: $("#userName").textbox("getValue"),
	});
}
//新增按钮
function add(){
	$("#type").val("0");
	$("#id").val("");
	$("#role").combobox("setValue","");
	$("#dept").combobox("setValue","");
	$("#name").textbox("setValue","");
	$("#popup").dialog("setTitle","新增");
	$('#popup').dialog('open');
}
//修改按钮
function edit(){
	var checkdeRow=$('#userListGrid').datagrid("getSelections");
	if(checkdeRow.length==0){
		$.messager.alert("提示","请选择一行！");
		return;
	}
	if(checkdeRow.length>1){
		$.messager.alert("提示","只能选中一行！");
		return;
	}
	var id=checkdeRow[0].id;
	var roles=checkdeRow[0].roles;
	var deptId=checkdeRow[0].deptId;
	var name=checkdeRow[0].name;
	var password=checkdeRow[0].password;
	$("#type").val("1");
	$("#id").val(id);
	var roleIds=[];
	for(var i=0;i<roles.length;i++){
		roleIds[i]=roles[i].id;
	}
	$("#role").combobox("setValue",roleIds);
	$("#dept").combobox("setValue",deptId);
	$("#name").textbox("setValue",name);
	$("#popup").dialog("setTitle","修改");
	$('#popup').dialog('open');
}
//删除
function cancel(){
	var checkdeRow=$('#userListGrid').datagrid("getSelections");
	if(checkdeRow.length==0){
		$.messager.alert("提示","请选择一行！");
		return;
	}
	var names;
	for(var  i=0;i<checkdeRow.length;i++){
		if(i==0){
			names=checkdeRow[i].name;	
		}else{
			names+=","+checkdeRow[i].name	
		}
	}
	$.messager.confirm('提示', "你要删除<span style='color:red'>"+names+"</span>?", function(r){
		if (r){
			var ids;
			for(var  i=0;i<checkdeRow.length;i++){
				if(i==0){
					ids=checkdeRow[i].id;	
				}else{
					ids+=","+checkdeRow[i].id	
				}
			}
			$.ajax({
				url:'${ctx}/userManage/deleteUser',
				data:{ids:ids},
				dataType:"JSON",
				type:"POST",
				success:function(data){
					$.messager.alert("提示","删除成功！");
					$('#userListGrid').datagrid('reload'); 
				},
				error:function(data){
					$.messager.alert("提示","未知错误，请联系管理员！","error");
				}
			})
			
		}
	});
}
//新增和修改提交
function sumbit(){
	var id=$("#id").val();
	var roleIds=$("#role").combobox("getValues");
	var roleIdString="";
	for(var i=0;i<roleIds.length;i++){
		if(roleIds[i]){
			if(i==(roleIds.length-1)){
				roleIdString+=roleIds[i];
			}else{
				roleIdString+=roleIds[i]+",";
			}
		}
	} 
	var deptId=$("#dept").combobox("getValue");
	var type=$("#type").val();
	var name=$("#name").textbox("getValue");
	var password=$("#password").textbox("getValue");
	$.ajax({
		url:'${ctx}/userManage/saveUser',
		data:{type:type,
			  id:id,
			  name:name,
			  password:password,
			  deptId:deptId,
			  roleIds:roleIdString},
		dataType:"JSON",
		type:"POST",
		success:function(data){
		$.messager.alert("提示",data.info);
		if(data.serialNumber=="-1"){
			return;	
		}
		$('#userListGrid').datagrid('reload'); 
		$('#popup').dialog('close');
		},
		error:function(data){
			$.messager.alert("提示","未知错误请联系管理员！","error");
		}
	})
}
</script>
</html>